<template>
  <div class="yiyuan">
    <h2 class="title">意愿认证</h2>
    <p class="tit-sub">选择人脸识别方式</p>
    <ul class="list-item">
      <li @click="toSuc">
        <img src="../assets/zfb.svg" alt="">
        <div class="list-item-p">
          <h3>支付宝人脸识别</h3>
          <p>需安装支付宝APP，并登录本人账号</p>
        </div>
      </li>
      <li @click="toSuc">
        <img src="../assets/tc.svg" alt="">
        <div class="list-item-p">
          <h3>腾讯人脸识别</h3>
          <p>需使用前置摄像头录制指示视频</p>
        </div>
      </li>
      <!--<li @click="toSuc">-->
        <!--<img src="../assets/e.svg" alt="">-->
        <!--<div class="list-item-p">-->
          <!--<h3>e签宝人脸识别</h3>-->
          <!--<p>需按提示动作完成人脸认证</p>-->
        <!--</div>-->
      <!--</li>-->
    </ul>
    <!--<p class="rec-other">其他认证方式</p>-->
    <!--<p class="sign-bot">e签宝提供技术支持</p>-->
  </div>
</template>

<script>
  export default {
    name: "recognise",
    data() {
      return {}
    },
    methods: {
      toSuc(){
        this.$router.push({path:'/success'})
      },
    },
    mounted() {

    },
    created() {

    },
  }

</script>

<style scoped>
  .yiyuan{
    padding: 0 1.5rem;
  }
  .title{
    font-size: 16px;
    text-align: center;
    color: #000;
    padding: 1.2rem 0;
    font-weight: bold;
  }
  .tit-sub{
    font-size: 14px;
    text-align: left;
  }
  .list-item li{
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #ccc;
    margin-top: 10px;
    cursor: pointer;
  }
  .list-item li:active,.list-item li:hover{
    border-color: #0c76ff;
    transition: .3s;
  }
  .list-item li img{
    width: 48px;
    margin-right: 5px;
  }
  .list-item-p{
    text-align: left;
  }
  .list-item-p h3{
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .list-item-p p{
    font-size: 12px;
    color: #666;
  }
  .rec-other{
    position: fixed;
    bottom: 50px;
    font-size: 14px;
    color: #0c76ff;
    width: 100%;
    left: 0;
    text-align: center;
  }
  .sign-bot{
    height: 40px;
    background: #eee;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 40px;
  }
  @media screen and (min-width: 800px) {
    .yiyuan {
      width: 1000px;
      margin: 0 auto;
    }
    .list-item{
      display: flex;
    }
    .list-item li{
      margin-right: 15px;
      flex: 1;
    }
  }
</style>
